<template>
  <div class="home-wrap">
    <div class="home-top">
      这是商家信息
      <!-- 导航 -->
      <van-tabs
        v-model="active"
        color="green"
        background="skyblue"
        title-active-color="red"
        @click="handleClick"
      >
        <van-tab title="商品"></van-tab>
        <van-tab title="评价"></van-tab>
        <van-tab title="商家"></van-tab>
      </van-tabs>
    </div>
    <!-- 二级页面出口 -->
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive> -->
    <router-view></router-view>
    <!-- 购物车 -->
    <div class="shop-car" @click="show = !show">
      <span>总价格：{{ total }}</span>
    </div>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '45%' }"
    >
      <p class="mr-t-5" v-for="item in shopCar" :key="item.id">
        <span class="mr-l-10">{{ item.name }}</span>
        <span class="mr-l-10">{{ item.price * item.count }}</span>
        <button class="mr-l-10" @click="handleChangeCount(item.id, 'Minus')">
          -
        </button>
        <span class="mr-l-10">{{ item.count }}</span>
        <button class="mr-l-10" @click="handleChangeCount(item.id, 'Add')">
          +
        </button>
      </p>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      active: 0,
      show: false,
    };
  },
  computed: {
    ...mapGetters(["shopCar"]),
    total() {
      let sum = 0;
      this.shopCar.forEach((food) => {
        sum += food.count * food.price;
      });
      return sum;
      // return this.shopCar.reduce((pre, cur) => {
      //   return pre + (cur.pirce * cur.count)
      // }, 0)
    },
  },
  methods: {
    ...mapMutations(["CHANGE_FOOD_COUNT"]),
    handleClick(name) {
      console.log(name);
      switch (name) {
        case 0:
          this.$router.push("/home/goods");
          break;
        case 1:
          this.$router.push("/home/evaluate");
          break;
        case 2:
          this.$router.push("/home/shop");
          break;
      }
    },
    // 改变商品数量
    handleChangeCount(id, type) {
      this.CHANGE_FOOD_COUNT({ id, type });
    },
  },
};
</script>

<style lang="less" scoped>
.home-wrap {
  height: 100%;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  .home-top {
    height: 150px;
    background-color: deeppink;
  }
  .shop-car {
    height: 50px;
    line-height: 50px;
    background-color: violet;
    position: fixed;
    bottom: 10px;
    right: 10px;
    left: 10px;
    border-radius: 25px;
    padding: 0 20px;
    z-index: 3000;
  }
  .van-popup {
    padding: 20px;
    .mr-t-5 {
      margin-top: 5px;
    }
    .mr-l-10 {
      margin-left: 10px;
    }
  }
}
</style>